<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片粘贴测试</title>
    <link rel="stylesheet" href="./dist/editor.md/css/editormd.min.css" />
    <style>
        body {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }
        .container {
            margin-top: 30px;
        }
        h1 {
            text-align: center;
            margin-bottom: 30px;
        }
        .tip {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
            border-left: 4px solid #4CAF50;
        }
        .tip h3 {
            margin-top: 0;
            color: #4CAF50;
        }
        .buttons {
            margin-top: 20px;
            text-align: center;
        }
        button {
            padding: 10px 20px;
            margin: 0 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        #loading {
            display: none;
            text-align: center;
            margin-top: 10px;
            color: #666;
        }
    </style>
</head>
<body>
    <h1>图片粘贴测试</h1>
    
    <div class="tip">
        <h3>使用说明</h3>
        <p>1. 复制一张图片到剪贴板（如截图、或右键图片选择"复制图片"）</p>
        <p>2. 点击编辑区域获得焦点</p>
        <p>3. 按 Ctrl+V/Command+V 粘贴图片</p>
        <p>4. 图片将自动上传并显示在编辑器中</p>
        <p><strong>注意</strong>：如果无法粘贴，请打开浏览器控制台查看日志信息</p>
    </div>
    
    <div class="container">
        <div id="editor">
            # 图片粘贴测试
            
            请在此处粘贴图片，支持截图直接粘贴。
            
            1. 复制图片到剪贴板
            2. 点击此处并粘贴(Ctrl+V/⌘+V)
        </div>
        <div id="loading">图片上传中，请稍候...</div>
        <div id="status" style="margin-top: 15px; color: #666;"></div>
    </div>
    
    <div class="buttons">
        <button id="clear-btn">清空内容</button>
        <button id="view-html-btn">查看HTML</button>
    </div>
    
    <!-- 引入依赖的JavaScript库 -->
    <script src="./dist/editor.md/examples/js/jquery.min.js"></script>
    <script src="./dist/editor.md/editormd.min.js"></script>
    <script src="./js/image-helper.js"></script>
    <script src="./js/editor-config.js"></script>
    
    <script>
        $(function() {
            // 更新状态信息
            function updateStatus(message) {
                $("#status").html(message);
                console.log(message);
            }
            
            updateStatus("页面已加载，编辑器初始化中...");
            
            // 初始化编辑器
            var editor = window.initEditor("editor", {
                height: 400,
                placeholder: "请在此处粘贴图片(Ctrl+V/Command+V)...",
                imageUploadURL: "/upload/image",
                imageUploadCallback: function(data) {
                    console.log("上传回调: ", data);
                    updateStatus("图片上传完成: " + JSON.stringify(data));
                },
                onloadFun: function() {
                    // 显示加载中提示
                    $("#loading").show();
                    updateStatus("图片上传中...");
                },
                onloadedFun: function() {
                    // 隐藏加载中提示
                    $("#loading").hide();
                    updateStatus("图片上传处理完成");
                }
            });
            
            // 初始化编辑器后通知用户
            setTimeout(function() {
                updateStatus("编辑器已准备就绪，请点击编辑区域并粘贴图片");
                
                // 针对CodeMirror编辑器添加直接的粘贴事件
                try {
                    var cm = editor.cm;
                    if (cm) {
                        // 获取CodeMirror的DOM元素
                        var cmElement = cm.getWrapperElement();
                        
                        $(cmElement).on("paste", function(e) {
                            updateStatus("CodeMirror元素检测到粘贴事件");
                            var clipboardData = e.originalEvent.clipboardData;
                            
                            if (!clipboardData) {
                                updateStatus("CodeMirror: 无法访问剪贴板数据");
                                return;
                            }
                            
                            // 检查是否有图片
                            var items = clipboardData.items;
                            var imageItem = null;
                            
                            if (items) {
                                for (var i = 0; i < items.length; i++) {
                                    updateStatus("CodeMirror: 剪贴项 " + i + ": " + items[i].type);
                                    if (items[i].type.indexOf("image") !== -1) {
                                        imageItem = items[i];
                                        break;
                                    }
                                }
                            }
                            
                            if (imageItem) {
                                e.preventDefault(); // 阻止默认粘贴行为
                                updateStatus("CodeMirror: 发现图片，准备上传");
                                
                                var file = imageItem.getAsFile();
                                if (file) {
                                    // 显示上传中状态
                                    $("#loading").show();
                                    updateStatus("CodeMirror: 开始上传图片...");
                                    
                                    // 手动上传图片
                                    var formData = new FormData();
                                    formData.append("file", file);
                                    
                                    $.ajax({
                                        url: "/upload/image",
                                        type: "POST",
                                        data: formData,
                                        processData: false,
                                        contentType: false,
                                        dataType: "json",
                                        success: function(data) {
                                            $("#loading").hide();
                                            
                                            if (data.code === 0) {
                                                var url = data.message;
                                                var alt = file.name || "图片";
                                                
                                                // 添加时间戳防止缓存
                                                var timestamp = new Date().getTime();
                                                var finalUrl = url + "?t=" + timestamp;
                                                
                                                updateStatus("CodeMirror: 图片上传成功，URL: " + finalUrl);
                                                
                                                // 插入图片Markdown
                                                var imageMarkdown = "![" + alt + "](" + finalUrl + ")";
                                                var doc = cm.getDoc();
                                                var cursor = doc.getCursor();
                                                doc.replaceRange(imageMarkdown, cursor);
                                            } else {
                                                updateStatus("CodeMirror: 图片上传失败: " + data.message);
                                                alert("上传失败: " + data.message);
                                            }
                                        },
                                        error: function() {
                                            $("#loading").hide();
                                            updateStatus("CodeMirror: 图片上传请求失败");
                                            alert("上传请求失败");
                                        }
                                    });
                                }
                            } else {
                                updateStatus("CodeMirror: 粘贴内容中没有图片");
                            }
                        });
                        
                        updateStatus("已为CodeMirror编辑器添加粘贴事件处理器");
                    } else {
                        updateStatus("无法获取CodeMirror实例");
                    }
                } catch (err) {
                    updateStatus("为CodeMirror添加粘贴处理时出错: " + err.message);
                }
            }, 1000);
            
            // 清空按钮事件
            $("#clear-btn").click(function() {
                editor.clear();
                updateStatus("编辑器内容已清空");
            });
            
            // 查看HTML按钮事件
            $("#view-html-btn").click(function() {
                var htmlContent = editor.getHTML();
                updateStatus("HTML内容: " + htmlContent);
                alert(htmlContent);
            });
        });
    </script>
</body>
</html> 